<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>视差滚动效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        overflow-x: hidden;
      }

      .parallax-container {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 1px;
      }

      .parallax-section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-style: preserve-3d;
      }

      .parallax-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateZ(-1px) scale(2);
        background-size: cover;
        background-position: center;
      }

      .parallax-content {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;
        padding: 40px;
      }

      .parallax-content h1 {
        font-size: 64px;
        font-weight: 600;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .parallax-content p {
        font-size: 24px;
        opacity: 0.9;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      }

      .section-1 .parallax-background {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .section-2 .parallax-background {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .section-3 .parallax-background {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .normal-section {
        min-height: 100vh;
        padding: 80px 40px;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .normal-content {
        max-width: 800px;
        text-align: center;
      }

      .normal-content h2 {
        font-size: 48px;
        margin-bottom: 20px;
        color: #333;
      }

      .normal-content p {
        font-size: 18px;
        line-height: 1.8;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div class="parallax-container">
      <section class="parallax-section section-1">
        <div class="parallax-background"></div>
        <div class="parallax-content">
          <h1>视差滚动</h1>
          <p>向下滚动查看效果</p>
        </div>
      </section>

      <section class="normal-section">
        <div class="normal-content">
          <h2>中间内容区</h2>
          <p>
            这是正常的内容区域，没有视差效果。
            继续滚动可以看到更多的视差效果。
          </p>
        </div>
      </section>

      <section class="parallax-section section-2">
        <div class="parallax-background"></div>
        <div class="parallax-content">
          <h1>第二层视差</h1>
          <p>背景移动速度不同，创造深度感</p>
        </div>
      </section>

      <section class="normal-section">
        <div class="normal-content">
          <h2>更多内容</h2>
          <p>
            视差滚动通过 CSS transform 和 perspective 实现，
            让页面更加生动有趣。
          </p>
        </div>
      </section>

      <section class="parallax-section section-3">
        <div class="parallax-background"></div>
        <div class="parallax-content">
          <h1>第三层视差</h1>
          <p>滚动到底部</p>
        </div>
      </section>
    </div>
  </body>
</html>

